<template>
	<view class="amli mar_top">
		<view class="mali_title send_tab">
			<!-- <view class="flex flex_bet flex_align ">
				<view class="txt" :class="{'line':index === 1, 'active' : active === index + 1, 'actives': active === 3}"
					v-for="(item,index) in mailList" :key="item.id" @click="switchIndex(index+ 1)">{{item.name}}
					<view class="hint" >{{index === 2 ? '暂不快递' :  ''}}</view>
				</view>
			</view> -->
			<!-- <u-subsection 
			:list="mailList" 
			:current="current"
			 mode="button" 
			 @change="changeSubsection"
			 >
			</u-subsection> -->
			<u-tabs :list="mailList" @change="changeSubsection" :current="current" :itemStyle="{padding:'10px 0',width:'33%'}"></u-tabs>
		</view>

		
		<!-- 自主寄回 -->
		<view class="box_redius send_box" v-if="active === 1 || active === 2">
			<view class="" style="color: #759a65;" v-if="active === 1">
				*请优先选择售后上门取件！售后上门取件无任何手续费，您也无需预先支付快递费，将包裹给收件员即可！
			</view>
			<view class="" style="color: #759a65;" v-if="active === 2">
				*保内维修请使用【售后快递上门取件】；自主快递需您打包后自行联系快递公司寄出，并按提示填写快递单号！
			</view>
			<view class="" v-if="active === 1">
				<slot name="mailDate"></slot>
			</view>
			<view class="express_right mar_top_middle">
				<view class="send flex flex_align flex_bet">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/send.png" mode="widthFix" style="width: 60rpx;"></image>
					<view class="name">
						<view class="title">{{address.person.name}}<text>{{address.person.phone}}</text></view>
						<view class="addr">{{address.person.addr}}</view>
					</view>
					<view class="addr_list" @click="goToUrl('/pages/myAddress/index')">地址簿</view>
				</view>
				<view class="send_line" v-if="active === 2"></view>
				<view class="send flex flex_align flex_bet mar_bottom" v-if="active === 2">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/put.png" mode="widthFix" style="width: 60rpx;"></image>
					<view class="name">
						<view class="title">{{address.firm.name}} <text>{{address.firm.phone}}</text></view>
						<view class="addr">{{address.firm.addr}}</view>
					</view>
					<view class="addr_list" @click="goToUrl('/pages/afterAddress/index')">地址簿</view>
				</view>
			</view>
			<!-- <view class="client_type flex">
				<view class="header_star mar_right mar_top" v-show="active === 1">寄回地址:</view>
				<view class="client_type box_redius mar_top amil_ex flex_one " :class="{'mar_left': active === 1}">
					<view class="flex flex_align flex_bet">
						<view class="address_info">
							<view class="header_star mar_bottom" v-show="active !== 1">寄回地址<text
									class="five_star iconfont icon-shiwujiaoxing"></text></view>
							<view class="font_w title">{{address.firm.name}} {{address.firm.phone}}</view>
						</view>
						<view class="address_icon" @click="goToUrl('/pages/afterAddress/index')"><text
								class="iconfont icon-dizhibu icon"></text>
							<view class="text">地址簿</view>
						</view>
					</view>
					<view>{{address.firm.addr}}</view>
				</view>
			</view>

			<view class="client_type flex">
				<view class="header_star mar_right mar_top" v-show="active === 1">取件地址:</view>
				<view class="client_type box_redius mar_top amil_ex flex_one" :class="{'mar_left': active === 1}">
					<view class="flex flex_align flex_bet">
						<view class="address_info">
							<view class="header_star mar_bottom" v-show="active !== 1">寄出地址<text
									class="five_star iconfont icon-shiwujiaoxing"></text></view>
							<view class="font_w title">{{address.person.name}} {{address.person.phone}}</view>
						</view>
						<view class="address_icon" @click="goToUrl('/pages/myAddress/index')"><text
								class="iconfont icon-dizhibu icon"></text>
							<view class="text">地址簿</view>
						</view>
					</view>
					<view>{{address.person.addr}}</view>
				</view>
			</view> -->

			<view class="" v-if="active === 2">
				<slot name="mailNumber"></slot>
			</view>
		</view>

		<!-- 先录信息 -->
		<view class="box_redius send_box" v-if="active === 3" >
			您可先填写售后产品信息，待需要快递时请至寄修记录中，找到该记录进行补充快递信息。
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {

		},
		computed: {
			...mapState([
				'afterSale',
				'address'
			])
		},
		data() {
			return {
				mailList: [{
					name: '售后上门取件',
					id: 1
				}, {
					name: '自主寄回',
					id: 2
				}, {
					name: '暂不快递',
					id: 3
				}],
				active: 1,
				current: 0
			}
		},
		onShow() {
			this.active = this.afterSale.as_type
		},
		methods: {
			changeSubsection(index) {
				console.log(index);
				this.current = index.index
				this.$store.commit('editAsType', this.mailList[index.index].id)
				this.active = this.mailList[index.index].id
			},
			switchIndex(index) {
				this.$store.commit('editAsType', index)
				this.active = index
			},
			goToUrl(url) {
				uni.navigateTo({
					url: url + '?selectAddress=confirm'
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.send_tab{
		background: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom: .5px solid #f5f5f5;
			/deep/.u-tabs .u-tabs__wrapper__nav__item-1{
				position: relative;
			}
			/deep/.u-tabs .u-tabs__wrapper__nav__item-1::before{
				position: absolute;
				left: 0rpx;
				content: '';
				width: 1px;
				height: 30rpx;
				background: #e7e7e7;
			}
			/deep/.u-tabs .u-tabs__wrapper__nav__item-1::after{
				position: absolute;
				right: 0rpx;
				content: '';
				width: 1px;
				height: 30rpx;
				background: #e7e7e7;
			}
		}
	.amli {
		.send_box{
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
		
		.mali_title {
			//height: 80rpx;
			overflow: visible;
		}
		
		.line {
			border-right-width: 0.5px !important;
			border-color: #dadbde !important;
			border-right-style: solid;
			border-left-width: 0.5px !important;
			border-left-style: solid;
			padding: 0 80rpx;
		}

		.txt {
			position: relative;
			text-align: center;
		}


	}

	.active {
		color: #3c9cff;
	}

	.active:before {
		content: "";
		left: 50%;
		width: 60rpx;
		height: 100%;
		border-bottom: 2rpx solid #3c9cff;
		position: absolute;
		bottom: -10rpx;
		transform: translate(-50%, 0px);
	}

	.active::after {
		content: "";
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		background-color: #fff;
		border-radius: 50%;
		left: 50%;
		bottom: -200%;
		transform: translate(-50%, 0);
	}

	.actives::after {
		content: "";
		bottom: -90%;
	}

	.amil_ex {
		background-color: #F1F2F4;
		//margin-top: 40rpx;
		line-height: 40rpx;
	}

	.address_icon {
		text-align: center;

		.icon {
			font-size: 60rpx;
			color: #4550A3;
		}

		.text {
			font-size: 20rpx;
			line-height: initial;
		}
	}

	.header_star {
		line-height: initial;
	}

	.hint {
		font-size: 20rpx;
	}

	.flex_one {
		flex: 1;
	}

	.express_left {
		color: #fff;
		width: 15%;
		text-align: center;
		font-size: 28rpx;

		.items {
			padding: 15rpx;
			border-radius: 50%;
			display: inline-block;
		}

		.lines {
			width: 1rpx;
			height: 130rpx;
			border-left: 4rpx dashed #f2f2f2;
			position: relative;
			left: 50%;
		}



		.items:nth-child(3) {
			background-color: #ef4144;
		}
	}

	.send_items {
		background-color: #000;
		//padding: 15rpx;
		border-radius: 50%;
		display: inline-block;
		color: #fff;
		font-size: 28rpx;
		margin-right: 20rpx;
		height: 30px;
		width: 30px;
		line-height: 30px;
		text-align: center;
	}

	.income_items {
		background-color: #ef4144;
		border-radius: 50%;
		display: inline-block;
		color: #fff;
		font-size: 28rpx;
		margin-right: 20rpx;
		height: 30px;
		width: 30px;
		line-height: 30px;
		text-align: center;
	}

	.express_right {
		.send {
			letter-spacing: 2rpx;
			margin: 40rpx 0;
			.name {
				width: 60%;

				.title {
					color: #000;
					font-size: 26rpx;
					line-height: 40rpx;
					
					text {
						color: #000;
						font-size: 24rpx;
						margin-left: 10rpx;
					}

					.addr {
						color: #808080;
						font-size: 24rpx;
					}
				}
			}
		}

		.addr_list {
			width: 22%;
			text-align: center;
			border-left: 2rpx solid #f2f2f2;
			color: #808080;
			font-size: 24rpx;
			margin-left: 10rpx;
		}

		.send_line {
			border-bottom: 2rpx solid #f2f2f2;
			// margin: 40rpx 0;
		}
	}
</style>
